<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>执行完成界面</title>
    <!-- 引入 Font Awesome 图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">

    <style>
        /* 全局样式 */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f4f4f9;
            color: #333;
            margin: 0;
            padding: 20px;
        }

        /* 容器样式 */
        .container {
            display: flex;
            flex-wrap: wrap; /* 允许子元素换行 */
            justify-content: space-between;
            gap: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .container > div {
            flex: 1;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }

        /* 第一个子元素样式 */
        .container > div:first-child {
            flex-basis: 100%; /* 占据一行 */
            text-align: center; /* 内容居中 */
        }

        /* 第二个及以后的子元素样式 */
        .container > div:not(:first-child) {
            flex: 1; /* 平分剩余空间 */
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }

        /* 文件树样式 */
        .file-tree {
            list-style: none;
            padding: 0;
            margin: 0;
            text-align: left; /* 新增：文字左对齐 */
        }

        .file-tree .directory {
            margin-bottom: 15px;
        }

        .file-tree .file {
            margin-bottom: 8px;
        }

        .checkbox-label {
            display: inline-block;
            margin-right: 10px;
            font-size: 14px;
        }

        /* 复选框样式 */
        .file-tree li input[type="checkbox"] {
            position: static;
            margin-left: 10px;
        }

        /* 按钮样式 */
        .delete-button {
            background-color: #007BFF;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .delete-button:hover {
            background-color: #0056b3;
        }

        /* fieldset 样式 */
        fieldset {
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
        }

        legend {
            font-size: 18px;
            font-weight: bold;
            color: #555;
            padding: 0 10px;
        }

        /* 表格样式 */
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        th,
        td {
            padding: 10px 15px;
            border: 1px solid #ddd;
            text-align: left;
        }

        th {
            background-color: #f4f4f9;
            color: #333;
        }

        tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        tr:hover {
            background-color: #f1f1f1;
        }

        button {
            background-color: #007BFF;
            color: white;
            padding: 5px 10px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            margin-right: 5px;
        }

        button:hover {
            background-color: #0056b3;
        }


        /* 新增两栏布局样式 */
        .two-column-layout {
            display: flex;
            gap: 20px;
        }

        .task-info {
            flex: 1;
            text-align: left; /* 新增：文字左对齐 */
        }

        .file-info {
            flex: 1;
        }

        /* 中间按钮操作区域样式 */
        #action-area {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #start-button {
            padding: 30px 60px; /* 增大按钮内边距以放大按钮 */
            font-size: 32px; /* 增大字体大小 */
            border: none;
            background-color: #007BFF;
            color: white;
            border-radius: 10px; /* 增大圆角半径 */
            cursor: pointer;
            transition: background-color 0.3s ease;
            width: 80%; /* 在小屏幕上占比更宽 */
            max-width: 400px; /* 最大宽度限制 */
        }

        #start-button:hover {
            background-color: #0056b3;
        }

        @media (max-width: 768px) {
            #start-button {
                width: 90%; /* 在小屏幕上占比更宽 */
            }
        }
        /* 悬浮按钮样式 */
        #back-to-home {
            position: fixed;
            top: 700px;
            right: 20px;
            background-color: #007BFF;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            transition: background-color 0.3s ease;
        }

        #back-to-home:hover {
            background-color: #0056b3;
        }
    </style>
    <script>
        function uploadSelectedFiles() {
            const checkboxes = document.querySelectorAll('input[name="file-checkbox"]:checked');
            const filePaths = [];
            checkboxes.forEach(checkbox => {
                filePaths.push(checkbox.value);
            });
            filePaths.forEach(path => {
                const formData = new FormData();
                // 这里需要注意，浏览器端无法直接读取本地文件路径，需要服务器端配合
                // 可以考虑将路径发送到后端，由后端读取文件并上传
                formData.append('file', path);

                fetch('./upload-to-remote', {
                    method: 'POST',
                    body: formData
                })
                    .then(response => {
                        console.log()
                        if (response.ok) {
                            console.log('File uploaded successfully');
                            alert("上传成功")
                            return response.json()
                        } else {
                            console.log('File uploaded failed', response);
                            alert("上传失败")
                        }
                    }).then(data => {
                    console.log('Success:', data);
                })
                    .catch(error => console.error('Error:', error));
            });
        }

    </script>
    <title>pcd文件上传</title>
</head>

<body>
<div class="container">

    <div>
        <fieldset>
            <legend>pcd文件({{path}})</legend>

            <!-- 新增两栏布局 -->
            <div class="two-column-layout">
                <!-- 左侧任务信息 -->
                <div class="task-info">
                    <p>任务 ID: 1</p>
                    <p>任务创建时间: 2025年3月12日17:16:52</p>
                    <p>任务名称: 盘库任务</p>
                    <p>任务状态: 执行中</p>
                    <p>任务执行人: 单思义</p>
                    <p>执行地: 三号仓库-1号垛位</p>
                </div>
                <!-- 右侧文件信息 -->
                <div class="file-info">
                    <ul class="file-tree">
                        {% for item in file_tree['children'] %}
                        {% if item['type'] == 'directory' %}
                        <li class="directory">
                            <label class="checkbox-label" for="{{ item['name'] }}"> {{ item['name'] }}</label>
                            <input type="checkbox" name="file-checkbox" value="{{ item['name'] }}"
                                   id="{{ item['name'] }}">
                            <ul>
                                {% for child in item['children'] %}
                                {% if child['type'] == 'file' %}
                                <li class="file">
                                    <label class="checkbox-label" for="{{ child['name'] }}">{{ child['name'] }}</label>
                                    <label class="checkbox-label" for="{{ child['modified_time'] }}">{{
                                        child['modified_time'] }}</label>
                                    <label class="checkbox-label" for="{{ child['size_mb'] }}">{{ child['size_mb']
                                        }}</label>
                                    <input type="checkbox" name="file-checkbox" value="{{ child['path'] }}"
                                           id="{{ child['name'] }}">
                                </li>
                                {% endif %}
                                {% endfor %}
                            </ul>
                        </li>
                        {% endif %}
                        {% endfor %}
                    </ul>

                </div>
            </div>
        </fieldset>

        <div id="action-area">
            <button id="start-button">上传采集文件</button>
        </div>
    </div>

    <!-- 悬浮按钮 -->
    <button id="back-to-home" onclick="window.location.href='/task'">
        <i class="fa-solid fa-home"></i>
    </button>

</div>
</body>

</html>